﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>角色管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .layui-table-cell {
            height: auto;
            white-space: normal;
        }
    </style>
</head>
<body>
    <table class="layui-hide" id="role-table"></table>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer'], function(){
            var table = layui.table;// 表格组件
            var $ = layui.jquery;// jQuery
            var layer = layui.layer;// 弹出层组件

            // 初始化表格
            table.render({
                elem: '#role-table',// 绑定表格容器
                id: 'roleTable',// 给表格设置ID，便于后续操作
                toolbar: '#toolbarDemo',// 工具栏(如果有)
                height: '500',// 表格高度(全屏减去100px)
                // 定义表格列
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                    {field: 'roleName', title: '角色名称', width: 120},
                    {field: 'createName', title: '创建人', width: 100},
                    {field: 'createTime', title: '创建时间', width: 180, sort: true},
                    {field: 'updateTime', title: '更新时间', width: 180, sort: true},
                    {field: 'validity', title: '状态', width: 100, templet: function(d){
                        return d.validity == 1 ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-gray">无效</span>';
                    }}
                ]],
                //分页
                // page: true,
                // limit: 10,//每页10条
                // limits: [10, 20, 30, 50],
                // loading: true
            });

            // 使用Ajax加载数据
            function loadRoleData() {
                layer.load(2); // 显示加载中

                $.ajax({
                    //url: 'https://localhost:7174/api/Message/GetRole',
                    url: "@ViewBag.BaseUrl/T5/Message/GetRole",
                    type: 'get',
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6IlpDIiwiVXNlcklkIjoiMSIsImV4cCI6MTc0MzA0NTAwOSwiaXNzIjoiZ3JvdXBUd28iLCJhdWQiOiJncm91cFR3byJ9.o5KYnBxK-O0VAF14_yv1hTRDUIiNNY023m0Cy2VkTgE',
                        'Accept': 'application/json'
                    },
                    dataType: 'json',
                    success: function(res) {
                        layer.closeAll('loading'); // 关闭加载中
                        console.log(res)
                        // 根据API响应结构调整数据
                        if(res.code === 210 && res.data) {
                            // 重新渲染表格
                            table.reload('roleTable', {
                                data: res.data,
                            });
                        } else {
                            layer.msg('获取数据失败: ' + (res.message || '未知错误'), {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.closeAll('loading'); // 关闭加载中
                        layer.msg('请求失败: ' + error, {icon: 2});
                        console.error('Ajax请求失败:', xhr.responseText);
                    }
                });
            }

            // 页面加载完成后获取数据
            loadRoleData();

            // 如果需要定时刷新数据，可以设置定时器
            // setInterval(loadRoleData, 60000); // 每分钟刷新一次
        });
    </script>
</body>
</html>